import React from 'react';
import { Card } from '../common/Card';

interface Option {
  value: string;
  label: string;
}

interface StatCardProps {
  title: string;
  value: string;
  icon: React.ReactNode;
  color: string;
  bgColor: string;
  options?: Option[];
  selectedValue?: string;
  onSelect?: (value: string) => void;
}

export const StatCard: React.FC<StatCardProps> = ({
  title,
  value,
  icon,
  color,
  bgColor,
  options,
  selectedValue,
  onSelect
}) => {
  return (
    <Card>
      <div className="flex flex-col h-full">
        <div className="flex justify-between items-center mb-3">
          <div className={`p-2 rounded-lg ${bgColor}`}>
            <span className={color}>{icon}</span>
          </div>
          {options && (
            <select
              className="text-sm border rounded-md px-2 py-1 text-gray-600 focus:outline-none focus:ring-2 focus:ring-warm-light"
              value={selectedValue}
              onChange={(e) => onSelect?.(e.target.value)}
            >
              <option value="">所有工作区</option>
              {options.map((option) => (
                <option key={option.value} value={option.value}>
                  {option.label}
                </option>
              ))}
            </select>
          )}
        </div>
        <div className="flex flex-col">
          <h3 className="text-gray-600 text-sm mb-1">{title}</h3>
          <p className={`text-2xl font-bold ${color}`}>{value}</p>
        </div>
      </div>
    </Card>
  );
}; 